<template>
    <div>
      <mt-navbar style="padding-top: 1.6rem" v-model="selected" fixed>
        <mt-tab-item id="1">精品</mt-tab-item>
        <mt-tab-item id="2">分类</mt-tab-item>
        <mt-tab-item id="3">教育</mt-tab-item>
      </mt-navbar>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <ul class="boxUlOne">
            <li>
              <img src="../assets/小图标/旗子.png">
              <p>首发站</p>
            </li>
            <li>
              <img src="../assets/小图标/视频.png">
              <p>影音咖</p>
            </li>
            <li>
              <img src="../assets/小图标/信息.png">
              <p>交友趴</p>
            </li>
            <li>
              <img src="../assets/小图标/育儿1.png">
              <p>儿童专区</p>
            </li>
            <li>
              <img src="../assets/小图标/闪电.png">
              <p>快应用</p>
            </li>
          </ul>
          <div v-for="(item,index) in newdata" :key="index">
            <div class="left">
              <img :src="item.img">
            </div>
            <div class="right">
              <p>{{item.name}}</p>
              <p>{{item.active}}</p>
              <p>{{item.activeOne}}</p>
              <span>{{item.btn}}</span>
            </div>
          </div>
        </mt-tab-container-item>

        <mt-tab-container-item id="2">
          <ul class="boxUlTwo">
            <li>
              <p style="background: #08a878">看片神器</p>
              <p style="background: #f56707">种草好物</p>
              <p style="background: #0780f5">宅家一族</p>
              <p style="background: #d60430">女生必备</p>
            </li>
            <li v-for="(item,index) in newclassify" :key="index">
              <img :src="item.img">
              <span>{{item.list}}</span>
              <span>{{item.listOne}}</span>
              <span>{{item.listTwo}}</span>
              <span>{{item.listThree}}</span>
              <div class="span">{{item.name}}</div>
            </li>
          </ul>
        </mt-tab-container-item>

        <mt-tab-container-item id="3">
          <mt-swipe :auto="4000">
            <mt-swipe-item>
              <img src="../assets/轮播/1.jpeg">
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../assets/轮播/2.jpeg">
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../assets/轮播/3.jpeg">
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../assets/轮播/4.jpeg">
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../assets/轮播/5.jpeg">
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../assets/轮播/6.jpeg">
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../assets/轮播/7.jpeg">
            </mt-swipe-item>
          </mt-swipe>
          <div class="boxSpan">
            <p>
              本周最热<br>
              <span>精选时下热门应用<span>更多 ></span></span>
            </p>
            <ul>
              <li>
                <img src="../assets/小图标/download.png">
                <p>学工在线</p>
                <p>58.63M</p>
                <P>安装</P>
              </li>
              <li>
                <img src="../assets/小图标/download1.png">
                <p>聚创云课堂</p>
                <p>35.63M</p>
                <P>安装</P>
              </li>
              <li>
                <img src="../assets/小图标/download2.png">
                <p>职教优选</p>
                <p>58.63M</p>
                <P>安装</P>
              </li>
              <li>
                <img src="../assets/小图标/download3.png">
                <p>Lipa点呀点</p>
                <p>66.63M</p>
                <P>安装</P>
              </li>
            </ul>
          </div>
          <div class="boxSpan">
            <p>
              大家都在用<br>
              <span>搞定学习难度，这里有小帮手<span>更多 ></span></span>
            </p>
            <ul>
              <li>
                <img src="../assets/小图标/download.png">
                <p>学工在线</p>
                <p>58.63M</p>
                <P>安装</P>
              </li>
              <li>
                <img src="../assets/小图标/download1.png">
                <p>聚创云课堂</p>
                <p>35.63M</p>
                <P>安装</P>
              </li>
              <li>
                <img src="../assets/小图标/download2.png">
                <p>职教优选</p>
                <p>58.63M</p>
                <P>安装</P>
              </li>
              <li>
                <img src="../assets/小图标/download3.png">
                <p>Lipa点呀点</p>
                <p>66.63M</p>
                <P>安装</P>
              </li>
            </ul>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
      <mt-tabbar :fixed="true" class="tabbars">
        <mt-tab-item id="推荐">
          <router-link exact :to="{name:'Recommend'}">
            <img src="../assets/小图标/心.png">
            推荐
          </router-link>
        </mt-tab-item>
        <mt-tab-item id="应用">
          <router-link :to="{name:'Users'}">
            <img src="../assets/小图标/应用1.png">
            应用
          </router-link>
        </mt-tab-item>
        <mt-tab-item id="游戏">
          <router-link :to="{name:'Game'}">
            <img src="../assets/小图标/游戏.png">
            游戏
          </router-link>
        </mt-tab-item>
        <mt-tab-item id="排行">
          <router-link :to="{name:'Rankings'}">
            <img src="../assets/小图标/排行.png">
            排行
          </router-link>
        </mt-tab-item>
        <mt-tab-item id="管理" >
          <router-link :to="{name:'Administration'}">
            <img src="../assets/小图标/管理.png">
            管理
          </router-link>
        </mt-tab-item>
      </mt-tabbar>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Users",
      data(){
          return{
            selected:'1',
            getUrl:"https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/use",
            newdata:[],
            getClassify:"https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/classify",
            newclassify:[]
          }
      },
      methods:{
        gets(){
          axios.get(this.getUrl)
            .then(res=>{
                this.newdata = res.data.data;
                console.log(this.newdata)
              })
            .catch(error=>{
              console.log(error)
            });
          axios.get(this.getClassify)
            .then(res=>{
              this.newclassify = res.data.classify;
              console.log(this.newclassify)
            })
        }
      },
      mounted() {
        this.gets();
      }
    }
</script>

<style scoped>
  .left img{
    width: 1.4rem;
    height: 1.4rem;
  }
  .mint-swipe{
    width: 100%;
    height: 4rem;
    margin-top: 1.2rem;
  }
  .mint-swipe img{
    width: 100%;
    height: 4rem;
  }
</style>
